<template>
    <div id="app" class="reset-page">
        <scroll-fixed>
            <page-bar>
                <div slot="middle" class="header-middle">重置密码</div>
                <div slot="right"></div>
            </page-bar>
        </scroll-fixed>
        <section>
            <div>
                <i :class="[ emailFocus ? 'icon-mail-active' : 'icon-mail', 'left20' ]"></i>
                <input v-model.trim="email" type="text" placeholder="请输入邮箱" @focus="focusEvent(1)" @blur="blurEvent(1)" @keyup.enter="reset">
                <i class="icon-wrong" v-if="email" @click="email = ''"></i>
            </div>
            <div>
                <i :class="[ codeFocus ? 'icon-shield-active' : 'icon-shield', 'left20' ]"></i>
                <input v-model.trim="code" type="text" placeholder="请输入验证码" @focus="focusEvent(2)" @blur="blurEvent(2)" @keyup.enter="reset">
                <i class="icon-wrong clear-code" v-if="code" @click="code = ''"></i>
                <a href="javascript:;" class="get-code" @click="getCode">获取验证码</a>
            </div>
            <div>
                <i :class="[ pwdFocus ? 'icon-lock-active' : 'icon-lock', 'left20' ]"></i>
                <input v-model.trim="password" :type="pwdType" placeholder="请输入新密码" @focus="focusEvent(3)"
                       @blur="blurEvent(3)" @keyup.enter="reset">
                <i class="icon-wrong clear-pwd" v-if="password" @click="password = ''"></i>
                <i class="icon-eye" @click="showPwd"></i>
            </div>
            <button @click="reset">重置密码</button>
        </section>
    </div>
</template>

<script>
    import scrollFixed from "../components/scrollFixed.vue";
    import pageBar from "../components/pagebar.vue";

    export default {
        name: "reset_pwd",
        components: {
            [scrollFixed.name]: scrollFixed,
            [pageBar.name]: pageBar
        },
        data () {
            return {
                emailFocus: false,
                codeFocus: false,
                pwdFocus: false,
                pwdType: "password",
                isShowMsg: false,
                email: "",
                code: "",
                password: "",
                reg: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
                tips: ["请输入邮箱", "请输入验证码", "请输入新密码", "请输入正确的邮箱", "获取验证码成功", "获取验证码失败，请重新获取", "重置密码成功"],
            };
        },
        created () {

        },
        methods: {
            focusEvent(type) {
                switch (type) {
                    case 1:
                        this.emailFocus = true;
                        break;
                    case 2:
                        this.codeFocus = true;
                        break;
                    case 3:
                        this.pwdFocus = true;
                        break;
                }
            },

            blurEvent (type) {
                switch (type) {
                    case 1:
                        this.emailFocus = false;
                        break;
                    case 2:
                        this.codeFocus = false;
                        break;
                    case 3:
                        this.pwdFocus = false;
                        break;
                }
            },

            showPwd() {
                this.pwdType = this.pwdType === "password" ? "text" : "password";
            },

            getCode () {
                if (!this.email) {
                    this.$toast(this.tips[0]);
                    return false;
                }
                if (!this.reg.test(this.email)) {
                    this.$toast(this.tips[3]);
                    return false;
                }
                this.$http.post('?ct=member&ac=send_email', {email: this.email}).then(res => {
                    if (res.data.code === 0) {
                        this.$toast(this.tips[4]);
                    } else {
                        this.$toast(this.tips[5]);
                    }
                });
            },

            reset () {

                if (!this.email) {
                    this.$toast(this.tips[0]);
                    return false;
                }
                if (!this.reg.test(this.email)) {
                    this.$toast(this.tips[3]);
                    return false;
                }
                if (!this.code) {
                    this.$toast(this.tips[1]);
                    return false;
                }
                if (!this.password) {
                    this.$toast(this.tips[2]);
                    return false;
                }
                let params = {
                    email: this.email,
                    code: this.password,
                    password: this.password
                };

                this.$http.post('?ct=member&ac=forget_password', params).then(res => {
                    let data = res.data;
                    if (data.code === 0) {
                        this.$toast(this.tips[6]);
                        window.location.href = "login.html";
                    } else {
                        this.$toast(data.msg);
                    }
                });
            }
        }
    };
</script>

<style lang="less">
    .reset-page {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .scroll-fixed {
            border-bottom: 0.013333rem solid #eee;
        }

        .left20 {
            left: 20px;
        }

        .header-middle {
            font-size: 36px;
            color: #333;
        }

        section {
            margin-top: 82px;
            width: 100%;
            height: 100%;
            padding: 70px 50px 50px 50px;
            background: #fff;
            div {
                position: relative;
                margin-bottom: 40px;
                input {
                    height: 90px;
                    line-height: 50px;
                    width: 100%;
                    padding: 20px 100px;
                    background: #fff;
                    font-size: 34px;
                    color: #000;
                    outline: none;
                    border: 0;
                    border-bottom: 1px solid #e2e2e2;
                    caret-color: red;
                    -webkit-appearance: none;
                    border-radius: 0;
                    &:active,
                    &:focus {
                        border-color: #5a4640;
                    }
                    &:nth-child(2) {
                        padding-right: 180px;
                    }
                }
                i {
                    position: absolute;
                    background-size: 100%;
                    top: 0;
                    height: 90px;
                    background-repeat: no-repeat;
                    background-position-y: center;
                }
                .icon-mail {
                    width: 32px;
                    background-image: url("../assets/icon-mail.png");
                }
                .icon-mail-active {
                    width: 32px;
                    background-image: url("../assets/icon-mail-active.png");
                }
                .icon-shield {
                    width: 32px;
                    background-image: url("../assets/icon-shield.png");
                }
                .icon-shield-active {
                    width: 32px;
                    background-image: url("../assets/icon-shield-active.png");
                }
                .get-code {
                    position: absolute;
                    top: 30px;
                    right: 20px;
                    font-size: 30px;
                    color: #ffbfab;
                }
                .icon-lock {
                    width: 32px;
                    background-image: url("../assets/icon-lock.png");
                }
                .icon-lock-active {
                    width: 32px;
                    background-image: url("../assets/icon-lock-active.png");
                }
                .icon-wrong {
                    width: 28px;
                    background-image: url("../assets/icon-wrong.png");
                    right: 40px;
                }
                .clear-code {
                    right: 200px;
                }

                .clear-pwd {
                    right: 100px;
                }

                .icon-eye {
                    width: 29px;
                    background-image: url("../assets/icon-eye.png");
                    right: 45px;
                }
                ::-webkit-input-placeholder {
                    font-size: 28px;
                    color: #c6c6c6;
                }
                :-moz-placeholder {
                    font-size: 28px;
                    color: #c6c6c6;
                }
                ::-moz-placeholder {
                    font-size: 28px;
                    color: #c6c6c6;
                }
                :-ms-input-placeholder {
                    font-size: 28px;
                    color: #c6c6c6;
                }
            }
            button {
                display: block;
                width: 100%;
                height: 1.14rem;
                line-height: 1;
                margin: 80px 0 30px 0;
                font-size: 36px;
                color: #ffbfab;
                background: #e64a19;
                padding: 25px 0;
                border-radius: 10px;
                border: none;
                outline: none;
                -webkit-appearance: none;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }
        }

    }
</style>


